<template>
  <el-input v-model="filterVal" :prefix-icon="Search" placeholder="请输入智能体名称"/>
  <div class="menu-tree-com">
    <div class="mtc-head">
      <el-icon size="16" color="#606266" class="mtc-head-icon">
        <Menu/>
      </el-icon>
      期刊智能体列表
    </div>

    <el-tree
        ref="treeRef"
        :data="treeData"
        :props="defaultTreeProps"
        highlight-current
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        lazy
        :load="handleTreeLoad">
      <!--			:filter-node-method="filterNode"-->
      <!--			:load="handleTreeLoad"-->
      <!--			lazy-->
      <!--			:indent="45"-->
      <!--			@node-click="handleNodeClick"-->
      <!--			highlight-current-->
      <!--		>-->
      <template #default="{ node, data }">
        <element-tree-line :node="node" :showLabelLine="false" :indent="32">
					<span class="text-center font-black font-normal">
						<SvgIcon :name="node.data.icon" color="var(--el-color-primary)"/>
						&nbsp;{{ node.label }}
					</span>
          <!--					<span v-else class="text-center font-black text-red-700 font-normal"> <SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }} </span>-->
        </element-tree-line>
      </template>
    </el-tree>

  </div>
</template>

<script lang="ts" setup>
import {ref, toRaw, watch, h} from 'vue';
import {ElTree} from 'element-plus';
import {getElementLabelLine} from 'element-tree-line';
import {Search} from '@element-plus/icons-vue';
import SvgIcon from '/@/components/svgIcon/index.vue';
import {lazyLoadMenu, menuMoveUp, menuMoveDown} from '../../api';
import {warningNotification} from '/@/utils/message';
import {TreeTypes, MenuTreeItemType, AgenetTreeItem} from '../../types';
import type Node from 'element-plus/es/components/tree/src/model/node';

interface IProps {
  treeData: TreeTypes[];
  leaf?: boolean
}

const ElementTreeLine = getElementLabelLine(h);

const defaultTreeProps: any = {
  children: 'children',
  label: 'name',
  isLeaf: 'leaf',
};

const treeRef = ref<InstanceType<typeof ElTree>>();

withDefaults(defineProps<IProps>(), {
  treeData: () => [],
});
const emit = defineEmits(['treeClick']);

let filterVal = ref('');

watch(filterVal, (val) => {
  treeRef.value!.filter(val);
});

/**
 * 树的搜索事件
 */
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return toRaw(data).name.indexOf(value) !== -1;
};

/**
 * 树的懒加载
 */
const handleTreeLoad = async (node: Node, resolve: Function) => {
  if (node.data.id == 'group') {
    // 根节点下的子节点是 A-Z
    const childNodes = [
      {id: 'A', name: 'A', isLeaf: false},
      {id: 'B', name: 'B', isLeaf: false},
      {id: 'C', name: 'C', isLeaf: false},
      {id: 'D', name: 'D', isLeaf: false},
      {id: 'E', name: 'E', isLeaf: false},
      {id: 'F', name: 'F', isLeaf: false},
      {id: 'G', name: 'G', isLeaf: false},
      {id: 'H', name: 'H', isLeaf: false},
      {id: 'I', name: 'I', isLeaf: false},
      {id: 'J', name: 'J', isLeaf: false},
      {id: 'K', name: 'K', isLeaf: false},
      {id: 'L', name: 'L', isLeaf: false},
      {id: 'M', name: 'M', isLeaf: false},
      {id: 'N', name: 'N', isLeaf: false},
      {id: 'O', name: 'O', isLeaf: false},
      {id: 'P', name: 'P', isLeaf: false},
      {id: 'Q', name: 'Q', isLeaf: false},
      {id: 'R', name: 'R', isLeaf: false},
      {id: 'S', name: 'S', isLeaf: false},
      {id: 'T', name: 'T', isLeaf: false},
      {id: 'U', name: 'U', isLeaf: false},
      {id: 'V', name: 'V', isLeaf: false},
      {id: 'W', name: 'W', isLeaf: false},
      {id: 'X', name: 'X', isLeaf: false},
      {id: 'Y', name: 'Y', isLeaf: false},
      {id: 'Z', name: 'Z', isLeaf: false}
    ];

    // 使用 resolve 返回子节点数据
    resolve(childNodes);
  }

  //A-Z层数据处理
  if (node.level == 2) {
    try {
      const res = await lazyLoadMenu(node.data.id);
      const updatedNodes = res.data.map((journal: any) => ({
        ...journal,
        name: journal.journal,
        leaf: true,
        isLeaf: true,
      }));
      resolve(updatedNodes);
    } catch (error) {
      console.error('Lazy load error:', error);
      resolve([]); // 如果请求失败，返回空数组
    }
  }
  if (node.level == 3) {
    resolve([]);
  }
};

/**
 * 树的点击事件
 */
const handleNodeClick = (record: AgenetTreeItem, node: Node) => {
  if (record.isLeaf === true) {
    emit('treeClick', record);
  }
};

defineExpose({
  treeRef,
});
</script>

<style lang="scss" scoped>
.menu-tree-com {
  .mtc-head {
    display: flex;
    align-items: center;
    margin-left: -8px;
    color: #606266;
    font-weight: 600;

    .mtc-head-icon {
      margin-right: 8px;
      position: relative;
      top: -1px;
    }

    .mtc-tooltip {
      margin-left: 5px;
      position: relative;
      top: -1px;
    }
  }

  .mtc-tags {
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;

    .mtc-tags-icon {
      cursor: pointer;
      color: var(--el-color-primary);
    }
  }
}
</style>

<style lang="scss">
.menu-tree-com {
  height: calc(100% - 60px);
  max-height: 1430px;
  padding: 20px;
  box-sizing: border-box;
  //overflow-x: scroll;
  overflow-y: auto;

  .el-tree-node__content {
    height: 32px !important;
  }

  .el-tree .el-tree-node__expand-icon svg {
    display: none !important;
    height: 0;
    width: 0;
  }

  .el-tree-node__expand-icon {
    font-size: 16px;
  }

  .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 0;
    box-sizing: border-box;
    margin-right: 5px;
    margin-left: 24px;
  }

  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  .el-tree .el-tree-node__expand-icon.is-leaf {
    margin-left: 0;
  }

  .el-tree .el-tree-node__expand-icon:before {
    background: url('src/assets/img/menu-tree-show-icon.png') no-repeat center / 100%;
    content: '';
    display: block;
    width: 24px;
    height: 24px;
  }

  .el-tree .el-tree-node__expand-icon.expanded:before {
    background: url('src/assets/img/menu-tree-hidden-icon.png') no-repeat center / 100%;
    content: '';
    display: block;
    width: 24px;
    height: 24px;
  }

  .el-tree .is-leaf.el-tree-node__expand-icon::before {
    display: block;
    background: none !important;
    content: '';
    width: 18px;
    height: 18px;
    border: none;
  }
}
</style>
